<template>
  <view class="content-container">

    <!-- 职位详情卡片 -->
    <view class="position-card">
      <!-- 上半部分：职位基本信息（带背景色） -->
      <view class="position-top" :style="{ backgroundColor: getCardBgColor(positionItem['686f2308f11e0126aeb367d7']) }">
        <view class="position-header">
          <view class="position-title">
            <text class="title-text">{{positionItem['686f2308f11e0126aeb367d7'] || '职位名称'}}</text>
            <text class="position-count">{{positionItem['686e48ea1f42f2639e1b907b'] || 0}}位</text>
          </view>
          <view class="price-tag" :class="{'reported': getQuotation(positionItem['688daf5b8741e5dc9b095d8b']) === '已报价'}">{{getQuotation(positionItem['688daf5b8741e5dc9b095d8b'])}}</view>
        </view>
        <view class="position-desc-wrapper">
          <view class="position-desc">{{positionItem['6880ba578c409b88b851aa8b'] ? positionItem['6880ba578c409b88b851aa8b'][0] : '暂无描述'}}</view>
        </view>
        
        <view class="divider"></view>
        
        <view class="position-info">
          <view class="info-item">
            <text class="iconfont icon-location"></text>
            <text class="info-text">{{projectData['6876ff515d31544df2c58975'] || '暂无地址'}}</text>
          </view>
          <view class="info-item">
            <text class="iconfont icon-calendar"></text>
            <text class="info-text">{{projectData['686e317ee9211671b47589db'] ? projectData['686e317ee9211671b47589db'].slice(0, 10) : ''}} | {{ projectData['68a2c8d3703512ca0fc1128c'] || 0 }}天</text>
            <text class="price">{{getQuotation(positionItem['688daf5b8741e5dc9b095d8b']) === '已报价' ? Number(positionItem['688d889e8741e5dc9b0952d1']) : Number(positionItem['6880bee08c409b88b851ab0f']) || 0}}/天</text>
          </view>
        </view>
      </view>
      
      <!-- 下半部分：要求和项目内容（白色背景） -->
      <view class="position-bottom">
        <!-- 要求部分 -->
        <view class="section">
          <view class="section-header">
            <view class="section-indicator"></view>
            <text class="section-title">要求</text>
          </view>
          <view class="section-content">
            <text class="requirement-text">{{positionItem['6880ba578c409b88b851aa8b'] ? positionItem['6880ba578c409b88b851aa8b'].join('  ') : '暂无具体要求'}}</text>
          </view>
        </view>
        
        <!-- 项目内容部分 -->
        <view class="section">
          <view class="section-header">
            <view class="section-indicator"></view>
            <text class="section-title">项目内容</text>
          </view>
          <view class="section-content">
            <view class="content-item">
              <text class="content-text">{{positionItem['686e48ea1f42f2639e1b907f'] || '暂无项目内容描述'}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部推荐按钮 -->
    <view class="submit-btn-wrapper">
              <button class="submit-btn" @tap="handlePositionClick">推荐人选</button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, toRaw } from 'vue'
import { useProjectStore } from '/stores/project.js'
import { objectToUrlParams } from '/pages/utils/url.js'

const projectData = ref({})
const positionItem = ref({})

// 使用项目store
const projectStore = useProjectStore()


const handlePositionClick = () => {
  const min = toRaw(positionItem.value)['686e48ea1f42f2639e1b907c']
  const classify = toRaw(positionItem.value)['68917536f6303e511c9ab05f']
  const data = {
    min: min,
    classify: classify,
    projectId:projectData.value['rowid'],
    roleType: positionItem.value['686f2308f11e0126aeb367d7']
  }
  console.log('准备跳转到候选人页面，携带数据:', data);
  
  // 将数据转换为URL参数
  const params = objectToUrlParams({
    min: min || '',
    classify: classify || '',
    projectId:projectData.value['rowid'],
    roleType: positionItem.value['686f2308f11e0126aeb367d7']
  })
  
  if (classify == "一类角色") {
    uni.navigateTo({
      url: `/pages/candidate/index?${params}`
    })
  }
  else{
    uni.navigateTo({
      url: `/pages/candidate/quotation?${params}`
    })
  }
}

const getEventChannel = () => {
  
  // 在Vue3组合式API中，使用getCurrentPages()获取EventChannel
  // 这是uni-app在Vue3中的标准获取方式
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const eventChannel = currentPage.getOpenerEventChannel()
  
  if (!eventChannel) {
    console.warn('无法获取EventChannel，使用降级方案')
    loadFromLocalStorage()
    return
  }
  
  // 监听来自上一个页面发送的数据
  // 'acceptProjectData' 是约定的事件名称，与发送端保持一致
  eventChannel.on('acceptProjectData', (data) => {
    console.log('通过EventChannel接收到数据:', data)
    
    // 解构赋值，直接获取项目和职位数据
    const { project, position } = data
    
    // 更新响应式数据
    projectData.value = project || {}
    positionItem.value = position || {}

    // 使用toRaw()获取原始对象用于调试，避免显示响应式代理信息
    console.log('项目数据已更新:', toRaw(projectData.value))
    console.log('职位数据已更新:', toRaw(positionItem.value))
  
  })
  
  // 如果3秒内没有收到EventChannel数据，尝试从本地存储获取
  setTimeout(() => {
    if (!projectData.value.rowid) {
      console.log('未收到EventChannel数据，尝试本地存储')
      loadFromLocalStorage()
    }
  }, 100)
}
 
// 从本地存储获取数据的降级方案
const loadFromLocalStorage = () => {
  // 尝试从EventChannel降级存储中获取数据
  const eventChannelData = uni.getStorageSync('eventChannelData')
  if (eventChannelData) {
    projectData.value = eventChannelData.project || {}
    positionItem.value = eventChannelData.position || {}
    console.log('从EventChannel降级存储获取数据:', {
      project: toRaw(projectData.value),
      position: toRaw(positionItem.value)
    })
    uni.removeStorageSync('eventChannelData')
    return
  }
  
  // 兼容旧的URL参数方式
  const urlProjectData = uni.getStorageSync('currentProjectData')
  const urlPositionItem = uni.getStorageSync('currentPositionItem')
  
  if (urlProjectData && urlPositionItem) {
    projectData.value = urlProjectData
    positionItem.value = urlPositionItem
    
    console.log('从本地存储获取数据:', {
      project: toRaw(projectData.value),
      position: toRaw(positionItem.value)
    })
    
    // 清理本地存储的数据
    uni.removeStorageSync('currentProjectData')
    uni.removeStorageSync('currentPositionItem')
    return
  }
  
  // 最终降级：通过ID重新获取数据（需要实现API调用）
  console.warn('所有数据源都不可用，页面可能无法正常显示')
}

// 获取报价状态
const getQuotation = (status) => {
  return status == '提交成功' ? '已报价' : '待报价'
}

// 获取卡片背景颜色
const getCardBgColor = (role) => {
  switch (role) {
    case '礼仪':
      return '#fff8fc'
    case '兼职':
      return '#eef6ff'
    case '带队':
      return '#fff2ee'
    default:
      return '#ffffff'
  }}

  

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

// 页面加载时接收参数
// 使用uni-app官方推荐的EventChannel进行页面间数据通信
onLoad((options) => {
  console.log('content.vue页面加载完成，准备接收数据')
  
  // 尝试设置导航栏标题
  if (!projectStore.setNavigationTitle()) {
    console.log('暂无全局项目标题，等待EventChannel数据')
  }
  
  getEventChannel()
})

</script>

<style scoped>
/* 职位详情页面样式 */
.content-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
  padding-bottom: 150rpx; /* 为底部按钮留出空间 */
  box-sizing: border-box;
}

/* 顶部导航栏样式 */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 88rpx;
  background-color: #fff;
  margin: -20rpx -30rpx 20rpx -30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 120rpx;
  z-index: 10;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 页面级样式 */
page {
  background-color: #f5f5f5;
}

/* 职位卡片样式 */
.position-card {
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 2rpx solid #f9c6df;
  overflow: hidden;
}

/* 卡片上半部分（带背景色） */
.position-top {
  padding: 30rpx;
  background-color: #FFF8FA; /* 默认粉色背景 */
}

/* 卡片下半部分（白色背景） */
.position-bottom {
  padding: 30rpx;
  background-color: #ffffff;
}

/* 职位标题区域 */
.position-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

/* 职位标题 */
.position-title {
  display: flex;
  align-items: center;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.position-count {
  font-size: 28rpx;
  color: #333;
}

/* 价格标签 */
.price-tag {
  font-size: 24rpx;
  color: #fff;
  background: linear-gradient(to right, #FF6B9B, #FF9E9E);
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
}

/* 职位描述包装器 */
.position-desc-wrapper {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

/* 职位描述 */
.position-desc {
  font-size: 20rpx;
  color: #666;
  background-color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

/* 分隔线 */
.divider {
  height: 2rpx;
  background-color: #e4dfe2;
  margin: 20rpx 0;
}

/* 职位信息区域 */
.position-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  position: relative;
}

/* 图标样式 - 使用伪元素替代实际图标 */
.iconfont {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.icon-location::before {
  content: "📍";
  font-size: 24rpx;
}

.icon-calendar::before {
  content: "📅";
  font-size: 24rpx;
}

/* 信息文本 */
.info-text {
  font-size: 24rpx;
  color: #999;
  flex: 1;
}

/* 价格文本 */
.price {
  font-size: 28rpx;
  color: #FF6B9B;
  font-weight: bold;
}

/* 内容区块样式 */
.section {
  margin-bottom: 30rpx;
}

/* 区块标题区域 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 区块标题前的指示器 */
.section-indicator {
  width: 6rpx;
  height: 20rpx;
  background-color: #FF6B9B;
  border-radius: 3rpx;
  margin-right: 15rpx;
}

/* 区块标题 */
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* 区块内容 */
.section-content {
  padding-left: 21rpx;
}

/* 要求文本 */
.requirement-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 内容项 */
.content-item {
  margin-bottom: 15rpx;
}

/* 内容文本 */
.content-text {
  font-size: 26rpx;
  color: #FF6B9B;
  line-height: 1.6;
}

/* 底部按钮容器 */
.submit-btn-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: linear-gradient(to right, #FF6B9B, #FF9E9E);
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  border: none;
}
</style>

